<template>
  <div class="appp">
    <dv-full-screen-container>
      <div class="warrper">
        <div>
          <head-view :title="title" :time="time" />
        </div>
        <div class="content-root">
          <a-row :gutter="3" style="height: 100%">
            <a-col :span="6" style="height: 100%">
              <jiadong-lv />
              <div style="height: 1vh;"> </div>
              <div class="production-info">
                <dv-border-box-8 style="padding-top: 6px"
                  ><week-product />
                </dv-border-box-8>
              </div>
              <today-product-process />
            </a-col>
            <a-col :span="12" style="height: 92.5vh">
              <div class="box-border eq-list-root">
                <div class="mod-title">组装生产情况</div>
                <product-info />
              </div>
            </a-col>
            <a-col :span="6">
              <div class="box-border eq-list-root" style="height: 60vh">
                <div class="mod-title">人员生产效率</div>
                <user-product />
              </div>
              <div style="height: 40vh"><week-cl /></div>
            </a-col>
          </a-row>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import moment from "moment";
import HeadView from "../../plugins/Head/index.vue";
import jiadongLv from "./modules/jiadongLv.vue";
import productInfo from "./modules/productInfo.vue";
import weekProduct from "./modules/weekProduct.vue";
import todayProductProcess from "./modules/todayProductProcess.vue";
import userProduct from "./modules/userProduct.vue";
import weekCl from "./modules/weekCl.vue";

export default {
  name: "App",
  components: {
    HeadView,
    jiadongLv,
    productInfo,
    weekProduct,
    todayProductProcess,
    userProduct,
    weekCl,
  },
  data() {
    return {
      title: "组装车间生产看板",
      timeInterval: null,
      timeIndex: 0,
      time: moment().format("YYYY-MM-DD HH:mm"),
    };
  },
  created() {
    this.setTime();
  },
  mounted() {
    const _that = this;
    this.timeInterval = setInterval(() => {
      _that.timeIndex++;
      if (_that.timeIndex > 3) {
        _that.getData();
        _that.$childrentimeIndex = 0;
      }
      _that.setTime();
    }, 1000 * 60);
  },

  methods: {
    setTime() {
      const _that = this;
      _that.time = moment().format("YYYY-MM-DD HH:mm");
      const weekDay = moment().day();

      switch (weekDay) {
        case 0:
          _that.time = `${_that.time} 星期日`;
          break;
        case 1:
          _that.time = `${_that.time} 星期一`;
          break;
        case 2:
          _that.time = `${_that.time} 星期二`;
          break;
        case 3:
          _that.time = `${_that.time} 星期三`;
          break;
        case 4:
          _that.time = `${_that.time} 星期四`;
          break;
        case 5:
          _that.time = `${_that.time} 星期五`;
          break;
        case 6:
          _that.time = `${_that.time} 星期六`;
          break;
      }
    },
    destroyed() {
      clearInterval(this.timeInterval);
      this.timeInterval = null;
    },
  },
};
</script>

<style lang="less" scoped>
.appp {
  font-family: "MicrosoftYaHei", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #fff;
  // padding: 15px;
  box-sizing: border-box;
  /* margin-top: 60px; */
}

.content-root {
  height: 93vh;
  margin-left: 6px;
  margin-right: 6px;
  margin-top: 1vh;
}

.production-info {
  height: 31vh;
}

.mod-title {
  .px2font(24);
  .px2vh(padding-top, 8);
  .px2vw(padding-left, 15);
  .px2vh(padding-bottom, 8);
  letter-spacing: 2px;
  color: #fff;
  text-align: center;
  background: linear-gradient(
    to right,
    rgba(21, 60, 160, 0.05),
    rgba(29, 62, 208, 0.3) 50%,
    rgba(21, 60, 160, 0.05)
  );
  margin: 0 0 10px 0;
}

.warrper ::v-deep .dv-scroll-board .rows .ceil {
  .px2font(14) !important;
  color: #eee;
}

.warrper ::v-deep .dv-scroll-board .header .header-item {
  .px2font(16) !important;
}
.warrper ::v-deep .ant-fullcalendar-header {
  padding: 5px 16px 5px 0;
}
</style>
